<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>

    <!-- 引入CSS样式 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/羊驼.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 加上一片空白区域，不显示任何内容，只是占位，将啊标签撑到右边！ -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

     <!-- 页面的主区/版心 -->
     <div class="container">
        <!-- 左侧用户信息 -->
        <div class="container-left">
            <!-- 用该元素表示个人信息 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="img/hu.jpg" alt="">
                <!-- 用户名 -->
                <h3>是小周呀</h3>
                <a href="#">Gitee地址</a>
                <div class="counter">
                    <!-- span默认是行内元素（可以改） -->
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="container-right">
            <div class="blog_detail">
                <h3>自我介绍</h3>
                <div class="date">2022-12-04 16:00</div>
                <p>
                    Hi，这里是不想秃头的小周！
                    Hi，这里是不想秃头的小周！
                    Hi，这里是不想秃头的小周！
                    Hi，这里是不想秃头的小周！
                    Hi，这里是不想秃头的小周！
                    Hi，这里是不想秃头的小周！
                    Hi，这里是不想秃头的小周！
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eos neque reiciendis ea, officiis corrupti, unde doloremque corporis architecto ex recusandae eligendi ullam deleniti iure tenetur at possimus fugit rem.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, tempore error autem accusamus consectetur doloribus enim vero libero adipisci provident aperiam optio nemo, obcaecati corporis in assumenda eligendi suscipit porro.
                </p>
            </div>
        </div>
    </div>
</body>
</html>